<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./vue.js"></script>
    <script src="./api/isonp.js"></script>
  </head>

  <body>
    <div id="app">
      <div style="float: left; margin-right: 50px;">
        <h2>自定义下拉框1</h2>
        <custom-list :btn="aBtn" :list="list1"></custom-list>
      </div>
      <div style="float: left;">
        <h2>自定义下拉框2</h2>
        <custom-list :btn="bBtn" :list="list2"></custom-list>
      </div>
    </div>

    <script>
      //定义下拉框组件
      Vue.component("custom-list", {
        template: `
				<div class="warp">
					<div class="searchIpt">
					<div class="clearFix">
						<input type='text' @click="isShow = !isShow" v-model="val" />
						<input type='button' :value="btn" />
						<span></span>
					</div>
						<custom-li v-show="isShow" :list="list" @selectItem="selectItem"></custom-li>
					</div>
				</div>
			`,
        data() {
          return {
            val: "",
            isShow: true
          };
        },
        methods: {
          selectItem(item) {
            this.val = item;
          }
        },
        props: {
          btn: {
            type: String
          },
          list: {
            type: Array
          }
        },
        components: {
          "custom-li": {
            template: `
						 <ul class="list" > 
						<li v-for="item in list" @click="selectItem(item)" >{{item}}</li>
						</ul>	
					 `,
            props: ["list"],
            methods: {
              selectItem(item) {
                this.$emit("selectItem", item);
              }
            }
          }
        }
      });
      var vm = new Vue({
        el: "#app",
        data: {
          aBtn: "搜索",
          bBtn: "查询",
          list1: ["北京", "上海", "广州"],
          list2: ["2019-1-28", "2019-3-18", "2019-4-06"]
        }
      });
    </script>
  </body>
</html>
